<template>
		
	<el-container class="home-container">
		<!-- 头部区域 -->
	  <el-header>
		  <div>
			  <img src="../assets/17d1caa8674bdd4e.jpg" />
			  <span>后台管理系统</span>
		  </div>
		  <el-button class="home-buttom" type="info" @click="logout">退出</el-button>
	  </el-header>
	  <!-- 页面主体区域 -->
	  <el-container>
		  <!-- 侧边栏 -->
	    <el-aside :width="togglePx">
			<el-row class="tac">
				<div class="toggle-buttom" @click="toggleButtom"> ||| </div>
			  <el-col :span="24">
			    <el-menu
			      background-color="#606266"
			      text-color="#fff"
			      active-text-color="#409EFF"
				  unique-opened
				  :collapse="toggle"
				  :collapse-transition="false"
				  router
				  :default-active="activePath">
				  <!-- 一级菜单 -->
			      <el-submenu :index="item.id+''" v-for="item in menusList" :key="item.id">
			        <template slot="title">
			          <i :class="icons[item.id]"></i>
			          <span>{{item.authName}}</span>
			        </template>
					<!-- 二级菜单 -->
			          <el-menu-item :index="Item.path" v-for="Item in item.children" :key="Item.id" @click="Highlight(Item.path)">
						  <i class="el-icon-menu"></i>
						  <span>{{Item.authName}}</span>
						</el-menu-item>
			      </el-submenu>
			    </el-menu>
			  </el-col>
			</el-row>
		</el-aside>
		<!-- 右侧主体内容 -->
	    <el-main>
			<router-view></router-view>
		</el-main>
	  </el-container>
	</el-container>
</template>

<script>
	export default {
		data(){
			return{
				toggle:false,			//左侧导航条是否折叠
				togglePx:'200px',		//左侧导航条是否折叠宽度
				menusList:[],			//菜单目录数据
				icons:{					//一级菜单的图标 
					125:'iconfont icon-RectangleCopy1',
					103:'iconfont icon-RectangleCopy4',
					101:'iconfont icon-RectangleCopy2',
					102:'iconfont icon-RectangleCopy3',
					145:'iconfont icon-RectangleCopy'
				},
				activePath:''			//点击高亮路由地址
			}
		},
	    methods: {
			logout(){	
				window.sessionStorage.clear()	//清空token
				this.$router.push('/login')
			},
			getMenusList(){			//获取左侧导航条数据
				this.$axios.get('menus').then(data => {
					console.log(data.data)
					this.menusList = data.data.data
				})
			},
			toggleButtom(){		//点击按钮菜单折叠展开
				this.toggle = !this.toggle
				if(this.toggle == false){
					this.togglePx = '200px'
				}else{
					this.togglePx = '64px'
				}
			},
			Highlight(activePath){		//设置路由高亮
				window.sessionStorage.setItem('activePath',activePath)		//保存地址
				this.activePath = activePath	
			}
		},
		created(){
			this.getMenusList()
			this.activePath = window.sessionStorage.getItem('activePath')
		}
	}
</script>

<style lang="scss"  scoped>
	.home-container{
		height: 100%;
	}
	.el-header{
		background-color: #606266;
		padding-left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		div{
			display: flex;
			align-items: center;
			img{
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background-color: #eee; 
			}
			span{
				margin-left: 15px;
				font-size: 28px;
				color: #FFFDEF;
			}
		}
		.home-buttom{
			height: 40px;
		}
		
	}
	.el-aside{
		background-color: #606266;
		.el-menu{
			border-right: none;
		}
		.toggle-buttom{
			background-color: #4A5064;
			font-size: 24px;
			line-height: 28px;
			color: #e5e3d7;
			text-align: center;
			letter-spacing: 0.2em;
			cursor: pointer;
			
		}
		.tac{
			margin-top: 20px;
			.iconfont{
				margin-right: 10px;
			}
		}
	}
	.el-main{
		background-color: #F5F2F0;
	}
</style>
